<template>
  <div>
    <ul class="nav-ul">
      <li class="nav-li" v-for="(item, index) in navData" :key="index">
        <el-popover placement="right" trigger="click" vertical>
          <div slot="reference">
            <div class="top">
              <p style="float: left;margin-right: 5px;">
                <img class="icon" v-lazy="item.icon" alt="" />
              </p>
              <span class="title-name">{{ item.name }}</span>
              <!-- <span class="used">
                <i class="el-icon-thumb" />次数：{{ item.num }}</span> -->
            </div>
            <div class="desc">
              <el-tag type="border" color="green" v-show="item.title">{{
                item.title
              }}</el-tag>
              <p>
                <span>{{ item.desc }}</span>
              </p>
            </div>
          </div>
          <div class="mu">
            <ul>
              <li icon="ios-send" @click="jumpLink(item)">跳转</li>
              <li icon="md-document" v-if="item.doc" @click="openDoc(item)">使用文档</li>
              <li icon="md-heart" @click="addFavorite(item)">添加到我的收藏</li>
              <li icon="ios-clipboard" class="btn" @click="copyLink">拷贝网址</li>
              <li icon="ios-add-circle" @click="addBookmarks(item.link, item.name)">加入书签</li>
              <li icon="ios-trash" v-show="del" @click="delUrl(item)">从本项中删除</li>
              <li @click="deleteItem(item)">删除</li>
            </ul>
          </div>
        </el-popover>
      </li>
    </ul>
     <!-- <el-dialog
      title="文档1"
      :visible.sync="modalDoc"
      fullscreen
      custom-class="dialog-style"
      :before-close="handleClose">
      <div class="usage-content" v-if="modalDoc">
          <div class="toc">
            目录
          <div id="toc" />
          </div>
          <div class="markdown">
            <vue-markdown :source="docData" :toc=true toc-id="toc" ></vue-markdown>
          </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import VueMarkdown from "vue-markdown";


import hljs from 'highlight.js';
// import "highlight.js/styles/atom-one-dark.css";
import 'highlight.js/styles/github.css';


let highlightCode = () => {
  let preEl = document.querySelectorAll("pre");
  let codeEl = document.querySelectorAll("code");
  preEl.forEach(el => {
    hljs.highlightBlock(el);
  });
  codeEl.forEach(el => {
    hljs.highlightBlock(el);
  });
};

import { mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return {
      modalDoc: false,
      docSpinShow: false,
      docData: "",
      itemData: {
        id: '',
        name: '',
        icon: '',
        desc: '',
        doc: '',
        link: '',
        dlogOpen: false,
      },
    }
  },
  props: {
    navData: {
      default: {},
    },
    subTitle: {
      default: '',
    },
    del: {
      default: false,
    },
    spinShow: {
      default: false,
    },
  },
  methods: {
    openDoc(item) {
      if(item.doc.startsWith("http")) {
        window.open(item.doc)
        return
      }
      this.modalDoc = true
      this.docSpinShow = true
      this.$axios
        .get(item.doc)
        .then(rep => {
          this.docData = rep.data;
        })
        .catch(e => {
          this.$message.error("获取数据失败!");
          window.console.log(e);
        })
        .then(() => {
          this.docSpinShow = false
        })
    },
    closeDoc() {
      this.docData = ""
      this.modalDoc = false
    },
    handleClose() {
      this.docData = ""
      this.modalDoc = false
    },
    jumpLink(item) {
      item.title = this.subTitle ? this.subTitle : item.title
      this.saveUsedList(item)
      window.open(item.link)
    },
    copyLink() {
      var clipboard = new Clipboard('.btn')
      clipboard.on('success', (e) => {
        // 成功提示
        this.$Message.success('复制成功')
        // 释放内存
        clipboard.destroy()
        window.console.log(e)
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message.error('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
        window.console.log(e)
      })
    },
    addFavorite(item) {
      const index = this.favoriteList.findIndex((a) => {
        return item.link === a.link
      })
      if (index >= 0) {
        this.$Message.info('你已经添加啦！')
        return
      }
      item.title = this.subTitle ? this.subTitle : item.title
      this.saveFavoriteList(item)
      this.$Message.success('添加成功')
    },
    delUrl(item) {
      this.deleteList(item)
    },
    deleteItem() {
      let vNow = new Date();
        let sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
       sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
      console.log("GetDateNow", sNow);
    },
    addBookmarks(url, title) {
      var ua = navigator.userAgent.toLowerCase()

      if (ua.indexOf('msie 8') > -1) {
        // IE8
        window.external.AddToFavoritesBar(url, title)
      } else if (document.all || window.external) {
        try {
          window.external.addFavorite(url, title)
        } catch (e) {
          this.$message.error('您的浏览器不支持,请手动收藏!')
        }
      } else if (window.sidebar) {
        window.sidebar.addPanel(title, url, '')
      } else {
        this.$message.error('您的浏览器不支持,请手动收藏!')
      }
    },
    ...mapActions(['saveFavoriteList', 'saveUsedList', 'deleteList']),
  },
  computed: {
    ...mapGetters(['favoriteList']),
  },
  components: {
    VueMarkdown
  },
  mounted() {
    highlightCode();
  },
  updated() {
    highlightCode();
  }
}
</script>

<style lang="less" scoped>
@min-width: 768px;
span {
  word-break: break-all;
  word-wrap: break-word;
}

.top {
  height: 36px;
}
.nav-ul {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
}
.nav-li {
  position: relative;
  margin: 0 15px 15px 0;
  width: 180px;
  padding: 15px;
  border: 1px solid #eee;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;
  transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transition: 0.1s linear;
  -webkit-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  @media screen {
    @media (max-width: @min-width) {
      width: 100%;
    }
  }
}
.desc {
  padding-top: 5px;
  border-top: 1px solid #eee;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
.used {
  display: block;
  font-size: 6px;
  width: 120px;
  color: gray;
}
.mu{
  ul li{
    height: 31px;
    line-height: 31px;
    border-bottom: 1px solid #f3f3f3;
    padding-left: 20px;
    color: #6b7386;
    &:hover{
      color: #000;
      // background-color: #eee;
      cursor: pointer;
    }
  }
}

.usage-content {
  font-size: 14px;
  width: 100%;
  // padding: 0 80px 20px 80px;
  @media screen {
    @media (max-width: @min-width) {
      padding: 0 10px 10px 10px;
    }
  }
}

.usage-content /deep/ ul {
  padding-left: 25px;
}

.usage-content /deep/ ol {
  padding-left: 25px;
}
.usage-content /deep/ h2 {
  padding-top: 90px;
  margin-top: -90px;
}

.usage-content /deep/ blockquote {
  margin-top: 5px;
  padding: 0 1em;
  color: #6a737d;
  border-left: .25em solid #dfe2e5;
}

.toc {
  width: 200px;
  position: fixed;
  @media screen {
    @media (max-width: @min-width) {
      position: relative;
      margin-left: 0;
    }
  }
}
.toc /deep/ a {
  word-break: break-all;
  word-wrap: break-word;
}
.markdown {
  margin-left: 210px;
  @media screen {
    @media (max-width: @min-width) {
      position: relative;
      margin-left: 0;
    }
  }
}

</style>
